import React from 'react';
import {Column} from '@ant-design/plots';
import {Card} from "antd";
import useHotData from "@/hooks/get_hot_data.ts";
const HotProduct: React.FC = () => {
    const {hotData} = useHotData()
    console.log(hotData)
    const config = {
        data: hotData,
        xField: 'product_name',
        yField: 'count',
        slider: {
            x: {
                values: [0.1, 0.5],
            },
        },
    };

    return (
        <Card
            title={'热销商品统计'}
            style={{
                width: '100%',
                height: '90vh',
            }}
        >

            <div style={{width: '85vw', height: '80vh'}}>
                <Column {...config} />
            </div>

        </Card>
    )

}

export default HotProduct;